<!--
 * @Description: 动态table表格
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-03-16 16:16:57
 * @LastEditors: zhou
 * @LastEditTime: 2022-07-14 16:40:24
-->

<template>
    <div
        class="scroll-table"
        :style="{ '--border_color': border_color, '--hover_color': hover_row }"
    >
        <!-- 表格头部 -->
        <div
            class="table-head"
            :style="{
                background: headBg,
                height: styleUtil.px2vh(headHeight),
                gridTemplateColumns: gridColumns,
            }"
        >
            <div
                v-for="(col, index) in columns"
                :key="index"
                :class="['head-grid', getTextAlign(col.text_align)]"
            >
                <div
                    v-text="col.label"
                    :style="{
                        color: col.headColor || '#ffffff',
                        fontSize: col.headSize
                            ? styleUtil.px2vw(col.headSize)
                            : styleUtil.px2vw(head_size),
                    }"
                ></div>
            </div>
        </div>
        <!-- 表格内容 -->
        <div
            v-if="dataList && dataList.length > 0"
            ref="scrollerItem"
            class="table-body swiper-container swiper-container-free-mode"
            :style="{ height: `calc(100% - ${styleUtil.px2vh(headHeight)})` }"
        >
            <div class="swiper-wrapper">
                <!-- 1 渲染表格的 每一行 -->
                <div
                    v-for="(item, index) in dataList"
                    :key="index"
                    class="swiper-slide swiper-grid pointer"
                    :style="{
                        backgroundColor: index % 2 !== 0 ? evenBg : oddBg,
                        gridTemplateColumns: gridColumns,
                    }"
                    @click="onRow(item)"
                >
                    <!-- 1.1 渲染某行的 每一列-->
                    <div
                        v-for="(col, idx) in columns"
                        :class="['swiper-item', getTextAlign(col.text_align)]"
                        :key="idx"
                    >
                        <!-- 1.1.1 自定义卡槽 -->
                        <div v-if="col.isSlot" class="col_solt">
                            <slot :name="col.prop" :row="item"></slot>
                        </div>

                        <!-- 1.1.2 自定义事件 -->
                        <div
                            v-else-if="col.isClick"
                            class="col_click pointer"
                            @click="onClick(item, col)"
                        >
                            <span
                                :style="{
                                    color: col.textColor || '#ffffff',
                                    fontSize: col.textSize
                                        ? styleUtil.px2vw(col.textSize)
                                        : styleUtil.px2vw(content_size),
                                }"
                                >{{ dealText(item, col.prop) }}</span
                            >
                            <span
                                v-if="col.isIcon"
                                :class="[
                                    'iconfont',
                                    col.iconCss
                                        ? col.iconCss.name
                                        : 'icon-dingweixiao',
                                ]"
                                :style="{
                                    color:
                                        col.iconCss && col.iconCss.color
                                            ? col.iconCss.color
                                            : '#ffffff',
                                }"
                            ></span>
                        </div>

                        <!-- 1.1.3 自定义函数 -->
                        <div
                            v-else-if="
                                col.funName && typeof col.funName === 'function'
                            "
                            class="col_funname pointer"
                        >
                            <span
                                :style="{
                                    color: col.funColor || '#ffffff',
                                    fontSize: col.funSize
                                        ? styleUtil.px2vw(col.funSize)
                                        : styleUtil.px2vw(content_size),
                                }"
                                >{{ col.funName(item) }}</span
                            >
                        </div>
                        <!-- 1.1.4 展开行的 按钮列-->
                        <div
                            v-else-if="col.isExpand"
                            class="col_expand pointer"
                        >
                            <span
                                :style="{
                                    color: col.expandColor || '#ffffff',
                                    fontSize: col.expandSize
                                        ? styleUtil.px2vw(col.expandSize)
                                        : styleUtil.px2vw(content_size),
                                }"
                                >{{ dealText(item, col.prop) }}</span
                            >
                        </div>

                        <!-- 1.1.5 默认列-->
                        <div v-else class="col_default pointer">
                            <span
                                :style="{
                                    color: col.defaultColor || '#ffffff',
                                    fontSize: col.defaultSize
                                        ? styleUtil.px2vw(col.defaultSize)
                                        : styleUtil.px2vw(content_size),
                                }"
                                >{{ dealText(item, col.prop) }}</span
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 无数据 -->
        <div v-else class="empty">{{ empty_text }}</div>
    </div>
</template>

<script>
import Swiper from "swiper/js/swiper";
import "swiper/css/swiper.min.css";
// import Swiper from "swiper/vue/swiper";
// import "swiper/swiper.min.css";

export default {
    name: "DynamicTable",
    props: {
        columns: {
            // 渲染列名
            type: Array,
            default() {
                return [];
            },
        },
        // 默认表头文字大小
        head_size: {
            // 渲染列名
            type: Number,
            default: 13,
        },
        // 默认内容文字大小
        content_size: {
            // 渲染列名
            type: Number,
            default: 13,
        },
        // 奇数背景色
        oddBg: {
            type: String,
            default: "",
        },
        // 偶数背景色
        evenBg: {
            type: String,
            default: "",
        },
        // 头部背景颜色
        headBg: {
            type: String,
            default:
                "linear-gradient(to bottom, rgba(17, 36, 47, 0.9), rgba(15, 39, 52, 0.6), rgba(14, 61, 75, 0.45), rgba(0, 240, 255, 0.22))",
        },
        headHeight: {
            type: [String, Number],
            default: "40",
        },
        dataList: {
            // 渲染数据
            type: Array,
            default() {
                return [];
            },
        },
        border_color: {
            type: String,
            default: "#075056", // #081d2e
        },
        hover_row: {
            type: String,
            default: "rgba(0, 0, 0, 0)", // rgba(22, 159, 196, 0.25)
        },
        // 数据为空
        empty_text: {
            type: String,
            default: "数据为空~",
        },
        options: {
            type: Object,
            default() {
                return {
                    slidesPerView: "auto",
                    direction: "vertical",
                    speed: 3000,
                    loop: true,
                    autoplay: {
                        delay: 0,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    on: {
                        click: (e) => {
                            // console.log(e)
                            let i =
                                e.path[1].getAttribute(
                                    "data-swiper-slide-index"
                                ) ||
                                e.path[3].getAttribute(
                                    "data-swiper-slide-index"
                                );
                            i = Number(i);
                            this.$emit("onRow", this.dataList[i]);
                        },
                    },
                };
            },
        },
    },
    data() {
        return {
            is_scroll: true, // 是否发生滚动
        };
    },
    computed: {
        gridColumns() {
            let arr = [];
            this.columns.forEach((item) => {
                if (item.width) {
                    arr.push(this.styleUtil.px2vw(item.width));
                } else {
                    arr.push("1fr");
                }
            });
            return arr.join(" ");
        },

        dealText() {
            return (item, prop) => {
                return item[prop];
            };
        },
        // 获取对齐方式
        getTextAlign() {
            return (a) => {
                if (a == "text_left") return "jstart";
                else if (a == "text_right") return "jend";
                else return "jcenter";
            };
        },
    },
    watch: {
        dataList: {
            handler(n, o) {
                if (n && n.length > 0) this.initSwiper();
            },
            deep: true,
            immediate: true,
        },
    },
    created() {},
    methods: {
        initSwiper() {
            if (this.swiper) {
                // 销毁对象
                this.swiper.destroy();
                this.swiper = null;
            }
            this.$nextTick(() => {
                let parentH = this.$refs.scrollerItem.offsetHeight,
                    childrenH = 0;
                this.$refs.scrollerItem
                    .querySelectorAll(".swiper-slide")
                    .forEach((el) => {
                        childrenH += el.offsetHeight;
                    });

                if (childrenH > parentH) {
                    this.is_scroll = true;
                    this.swiper = new Swiper(
                        this.$refs.scrollerItem,
                        this.options
                    );
                    this.swiper.el.onmouseover = (event) => {
                        this.swiper.autoplay.stop();
                    };
                    this.swiper.el.onmouseleave = (event) => {
                        this.swiper.autoplay.start();
                    };
                } else {
                    this.is_scroll = false;
                }
            });
        },
        onClick(row, col) {
            this.$emit("onClick", row, col);
        },
        // 每一行 接受点击
        onRow(row) {
            if (!this.is_scroll) this.$emit("onRow", row);
        },
    },
};
</script>
<style>
.swiper-container-free-mode .swiper-wrapper {
    transition-timing-function: linear;
}
</style>

<style scoped lang="scss">
.scroll-table {
    height: 100%;
    border-top: 1px solid var(--border_color);

    .table-head {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: vh(40);
        // padding: 0 vw(10);

        .head-grid {
            display: inline-grid;
            height: inherit;
            align-items: center;
            padding: 0 vw(10);

            &:first-child {
                border-left: 1px solid var(--border_color);
            }

            &:last-child {
                border-right: 1px solid var(--border_color);
            }
        }
    }

    .swiper-container {
        height: calc(100% - vh(40));
        // padding: 0 vw(10);

        .swiper-wrapper {
            display: block;
        }

        .swiper-slide {
            height: auto;
            &:hover {
                // background: url("~@/assets/images/proview/hover.png") no-repeat
                //     0 0;
                // background-size: 100% 100%;
                background-color: var(--hover_color); // 传入的背景颜色时无效
            }

            &.swiper-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                min-height: vh(40);

                &:first-child {
                    border-top: 1px solid var(--border_color);
                }

                &:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 1px;
                    background: var(--border_color);
                }

                .swiper-item {
                    // background-color: chartreuse;
                    display: inline-grid;
                    align-items: center;
                    position: relative;
                    padding: vh(10) vw(10);
                    line-height: 1.8;

                    &:first-child {
                        border-left: 1px solid var(--border_color);
                    }

                    &:before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        top: 0;
                        right: 0;
                        width: 1px;
                        background: var(--border_color);
                    }

                    &:last-child {
                        border-right: 1px solid var(--border_color);

                        &:before {
                            content: unset;
                        }
                    }
                    .iconfont {
                        margin-left: vw(3);
                    }
                }

                &:last-child {
                    border-bottom: 1px solid var(--border_color);

                    &:before {
                        content: unset;
                    }
                }
            }
        }
    }

    .text-css {
        font-family: Microsoft YaHei;
        font-size: vh(13);
        color: #ffffff;
    }
    // 暂无数据
    .empty {
        color: #fff;
        font-size: 20px;
        margin: 60px auto;
        text-align: center;
    }
}
</style>
